<!--重点排查-->
<template>
  <div id="houseAppraisal">
    <!--<div class="title">-->
    <!--<span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">-->
    <!--<van-icon name="arrow-left" />返回-->
    <!--</span>-->
    <!--<span style="float: right;position: absolute;right: 5px;">-->
    <!--&lt;!&ndash; <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/shaixuan.png" /> &ndash;&gt;-->
    <!--</span>-->
    <!--重点排查-->
    <!--</div>-->
    <div style="padding: 10px">
      <div class="showSelectTop">
        <div @click="showPickerQX1" class="showSelect">
          <span>{{ formData.QX }}</span>
          <img src="../../../static/imgs/key/1.png" />
        </div>
        <van-popup v-model="showPickerQX" position="bottom" get-container="#popup">
          <van-picker
            show-toolbar
            :columns="BUILDTYPEcolumnQX"
            value-key="CITYNAME"
            @confirm="onConfirmBUILDTYPEQX"
            @cancel="showPickerQX = false"
          />
        </van-popup>
        <div @click="showPickerQX2" class="showSelect">
          <span>{{ formData.XZ }}</span>
         <img src="../../../static/imgs/key/1.png" />
        </div>
        <van-popup v-model="showPickerXZ" position="bottom" get-container="#popup">
          <van-picker
            show-toolbar
            :columns="BUILDTYPEcolumnXZ"
            value-key="CITYNAME"
            @confirm="onConfirmBUILDTYPEXZ"
            @cancel="showPickerXZ = false"
          />
        </van-popup>
      </div>
    </div>
    <div
      v-if="contentData.length == 0"
      style="text-align: center; padding-top: 20vh"
      :style="{'height':nowIndex==0? '83vh':'86.6vh'}"
    >
      <div style="margin-bottom: 10px">
        <img
          src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png"
        />
      </div>
      <div>暂无数据</div>
    </div>
    <div
      class="content1"
      :style="{
        height: nowIndex == 0 ? 'calc(100vh - 160px)' : 'calc(100vh - 112px)',
      }"
      v-else
    >
      <van-list v-model="loading" :finished="finished" :offset="4" finished-text="没有更多了" @load="onLoad">
      <div class="content" v-for="(item, index) in contentData" :key="index" >
        <div class="listItem" data-type="0">
          <div
            class="list"
            @click="contentDataClick(item)"
            @touchstart.capture="touchStart"
            @touchend.capture="touchEnd"
          >
            <div style="margin-bottom: 4px">
              <p style="font-weight: bold; height: 30px">
                <span style="float: left">{{ item.HZ_XM }}</span>
                <span style="float: right;color:#007aff" v-if="nowIndex == 0">
                  <span v-if="item.CHECK_FINAL_RESULT=='1'">审核通过</span>
                   <span v-if="item.CHECK_FINAL_RESULT=='0'">审核未通过</span>
                   <span v-if="item.CHECK_FINAL_RESULT=='2'">审核中</span>
                  <!--{{ item.CHECK_FINAL_RESULT=='1'?'审核通过':'审核未通过' }}-->
                </span>
                <span style="float: right;color:#007aff" v-if="nowIndex == 1">审核中</span>
                <!-- <span style="float: right;color:#007aff" v-if="nowIndex === 2">{{ item.CHECK_STATUS==2?'存在风险':'基本安全' }}</span> -->
                <span style="float: right;color:#007aff" v-if="nowIndex === 2">{{ item.CHECK_STATUS==2?'已排查':'已排查' }}</span>
                <span
                  v-if="item.F_HEALTH_DICNAME && nowIndex === 1"
                  :style="{
                    float: 'right',
                    color:
                      item.F_HEALTH_DICNAME === '正常' ? '#007AFF' : '#D70F27',
                  }"
                  >{{ item.F_HEALTH_DICNAME1 }}</span
                >
                <span
                  v-if="item.F_HEALTH_DICNAME && nowIndex === 0"
                  :style="{
                    float: 'right',
                    color:
                      item.F_HEALTH_DICNAME === 'Ⅱ级' ? '#e6a23c' : '#D70F27',
                  }"
                  >{{ item.F_HEALTH_DICNAME1 }}</span
                >
              </p>
              <p style="font-size: 14px; color: #848484; height: 30px">
                <span style="float: left"
                  >联系电话：{{ item.HZ_DH || "暂无数据" }}</span
                >
                <!-- <span style="float: right"
                  >房屋类型：{{ item.FWLX }}</span
                > -->
              </p>
              <p style="clear: both; display: flex">
                <img
                  style="margin-right: 10px"
                  src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png"
                />
                <span
                  @click="gotoMap(item)"
                  style="font-size: 14px; color: #007aff"
                  >{{ item.FW_ADDRESS || "暂无数据" }}</span
                >
              </p>
            </div>
          </div>
          <div
            class="delete"
            v-if="nowIndex == 0"
            :data-index="index"
            @click="deleteInfo(item)"
          >
            删除
          </div>
        </div>
      </div>
      </van-list>
    </div>
    <van-popup v-model="shoulm">
      <div class="con_box">
        <h3>{{ text.title }}</h3>
        <p>{{ text.message }}</p>
        <div class="btnv">
          <span @click="handleClose()" v-if="text.btn.cancelText">
            {{
            text.btn.cancelText
            }}
          </span>
          <span @click="handleOk()" v-if="text.btn.okText">
            {{
            text.btn.okText
            }}
          </span>
        </div>
      </div>
    </van-popup>
    <div class="bottom">
      <el-button
        type="primary"
        v-if="nowIndex == 0"
        style="width: 90%; margin-bottom: 6px"
        @click="handleGotoSave"
        >新增</el-button
      >
      <ul>
        <li
          v-for="(item, index) in bottomData"
          :key="index"
          @click="bottomClick(index)"
          :style="{ color: nowIndex == index ? '#007AFF' : '#000' }"
        >
          <img
            v-if="nowIndex == index"
            style="width: 18px"
            :src="item.icon"
          />
          <img v-else style="width: 18px" :src="item.icons" />
          <!-- <p>{{ item.name }} ({{ item.num }})</p> -->
             <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {
  InsertDataView,
  dataServerOpenDataView,
  updateDataView,
  FileServerUpload,
  GetFileData,
  DelectFile,
  FileServerProxy,
  QuerySignCallback,
  getNumberData,
  houseCheckcityCodeTransFrom,
  seauthData,
  houseCheckDelete,
  MP,
  dataTransFile,
} from "../../utils/api";
import dd from "gdt-jsapi";
export default {
  data() {
    return {
      value: "",
      nowIndex: 0,
      loading: false,
      finished: false,
      objectData:{},
      shoulm:false,
      text: {
        title: '温馨提示',
        message: '请确认是否删除?',
        btn: {
          okText: '确定',
          cancelText: '取消'
        }
      },
      ak: "BDv3WGThhC19xh6bVCjALzUscGSWxzaS", //这里是密钥，秘钥去百度地图申请
      showPickerAQYH: false,
      showPickerQX: false,
      startX: 0, //触摸位置
      endX: 0, //结束位置
      moveX: 0, //滑动时的位置
      disX: 0, //移动距离
      deleteSlider: "", //滑动时的效果,使用v-bind:style="deleteSlider",
      BUILDTYPEcolumnQX: [],
      contentData: [
      ],
      cityCode1:'441300000000',
      showPickerXZ: false,
      showPickerFWLX: false,
      BUILDTYPEcolumnFWLX: [],
      BUILDTYPEcolumnXZ: [],
      BUILDTYPEcolumnAQYH: [],
      CityColumns:[],
      cityCodeSCODE:"",
      fwlxNode:0,
      index:1,
      formData: {
        QX: " 区县",
        XZ: "乡镇",
        // FWLX: "房屋类型",
        // ZT: "状态",
        // AQYH: "安全",
      },
      showPickerZT: false,
      citycode2:'',
      ISZJF:'',
      ISZT:'',
      ISAQ:'',
      BUILDTYPEcolumnZT: [],
      bottomData: [
        {
          name: "安全排查",
          num: 0,
          icon: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/3.png",
          icons:
            "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/3-1.png",
        },
        {
          name: "排查中",
          num: 0,
          icons:
            "../../../static/imgs/key/2.png",
          icon: "../../../static/imgs/key/3.png",
        },
        {
          name: "已排查",
          num: 0,
          icons:
            "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/4.png",
          icon: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/4-1.png",
        },
      ],
    };
  },
  methods: {
    SearchData(){

    },
    handleClose() {
      this.shoulm = false;
    },
    handleOk(data) {
      this.handleButton();
    },
    handleGotoSave() {
      this.$router.push({
        path: "./keyInspectionAdd",
        query: {
          data: "新增",
          data1:this.nowIndex,
          citycode:this.cityCodeSCODE,
          cityCodeS:this.formData.QX,
          cityCode1:this.cityCode1,
        },
      });
    },
    getCity() {
      this.$nextTick(() => {
        MP(this.ak).then((BMap) => {
          //在此调用api
          var geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition((a) => {
            // this.city = a.address.city;
            this.CityColumns.forEach(item=>{
              if(item.CITYNAME == a.address.city){
                this.cityCode1 = item.CITYCODE
              }
            })
            // alert(a.address)
          });
        });
      });
    },
    // 滑动开始
    touchStart(e) {
      // 记录初始位置
      if (this.nowIndex == 0) {
        this.startX = e.touches[0].clientX;
      }
    },
    handleButton(data) {
     if (data == '取消') {
        this.show1 = false
      } else {
        this.deleteListData()
      }
    },
    // 滑动结束
    touchEnd(e) {
      // 当前滑动的父级元素
      let parentElement = e.currentTarget.parentElement;
      // 记录结束位置
      this.endX = e.changedTouches[0].clientX;
      // 左滑
      if (parentElement.dataset.type == 0 && this.startX - this.endX > 100) {
        this.restSlide();
        parentElement.dataset.type = 1;
      }
      // 右滑
      if (parentElement.dataset.type == 1 && this.startX - this.endX < -30) {
        this.restSlide();
        parentElement.dataset.type = 0;
      }
      this.startX = 0;
      this.endX = 0;
    },

    // 复位滑块
    restSlide() {
      let listItems = document.querySelectorAll(".listItem");
      for (let i = 0; i < listItems.length; i++) {
        // 复位
        listItems[i].dataset.type = 0;
      }
    },

    // 判断当前是否有滑块处于滑动状态
    checkSlide() {
      let listItems = document.querySelectorAll(".listItem");
      for (let i = 0; i < listItems.length; i++) {
        if (listItems[i].dataset.type == 1) {
          return true;
        }
      }
      return false;
    },

    // 删除
    deleteInfo(index) {
     this.shoulm = true
     this.objectData = index
    },
    deleteListData:async function(){
      var p={};
      p.fwIds=[this.objectData.FWID];
      p.isDelete=1;
      const res = await houseCheckDelete(p)
      if(res.data.success == true){
        this.$toast.success("成功！");
        let  parmes;
       if(this.nowIndex == 0){
        parmes =0 //'1,2'
      } else if(this.nowIndex == 1){
        parmes =1 //3
      } else{
        parmes = 2//'5,6'
      }
        this.contentData = [];
       if (this.nowIndex==0){
         this.getData("",this.cityCode1,'')
       }else {
         this.getData(parmes,this.cityCode1,'')
       }


        this.shoulm = false
      } else{
        this.$toast.fail("缺少参数！");
        this.shoulm = false
      }
      //重新刷新
    },
    gotoMap(data) {
      dd.ready(function () {
        dd.openLink({
          url: window.g.locateMapUrl + "?FWTYBH=" + data.F_FWTYBH,
        })
          .then((res) => {
          })
          .catch((err) => {
            console.error(err);
          });
      });
    },
    onClickLeft() {
      this.$router.push({
        path: "/FeatureList",
      });
    },
    bottomClick(index) {
      this.nowIndex = index;
      this.contentData = []
      this.index = 1
      this.formData.ZT = '状态'
      this.formData.FWLX = '房屋类型'
      this.formData.AQYH = '安全'
      let parmes = 0
      if(this.nowIndex == 0){
        parmes = 0//'1,2'
      } else if(this.nowIndex == 1){
        parmes =1// 3
      } else{
        parmes =2 //'5,6'
      }
      this.getNumberData(this.cityCode1,'','')
      if(index==0){
        this.getData("",this.cityCode1,this.fwlxNode);
      }else{
        this.getData(parmes,this.cityCode1,this.fwlxNode);
      }

    },
    //1
    onConfirmBUILDTYPEQX(value) {
      // this.formData.QX = value.CITYNAME;
      // this.showPickerQX = false;
      this.getTownOpenDataView5(value.CITYCODE);
      this.getNewCityCode(value.CITYCODE)
    },
    //获取新的行政区划代码
    getNewCityCode:async function(data){
      const res = await houseCheckcityCodeTransFrom(data)
      if(res.data.Success == true){
         this.cityCode1 = res.data.Data
      } else{
         this.cityCode1 = data
      }
      this.contentData = []
      this.index = 1
      let parmes = 0
      if(this.nowIndex == 0){
        parmes =0 //'1,2'
      } else if(this.nowIndex == 1){
        parmes =1 //3
      } else{
        parmes =2 //'5,6'
      }
      if (this.nowIndex == 0){
        this.getData("",this.cityCode1,this.fwlxNode);
      }else{
        this.getData(parmes,this.cityCode1,this.fwlxNode);
      }

    },
    //2
    onConfirmBUILDTYPEXZ(value) {
      this.formData.XZ = value.CITYNAME;
      this.showPickerXZ = false;
      this.getNewCityCode(value.CITYCODE)
      this.getNumberData(value.CITYCODE,this.fwlxNode,this.ISZT)
    },
    showPickerQX1() {
      // this.showPickerQX = !this.showPickerQX;
    },
    showPickerQX2() {
      this.showPickerXZ = !this.showPickerXZ;
    },
    showPickerQX3() {
      this.showPickerFWLX = !this.showPickerFWLX;
    },
    showPickerQX4() {
      this.showPickerZT = !this.showPickerZT;
    },
    showPickerQX5() {
      this.showPickerAQYH = !this.showPickerAQYH;
    },
    //获取列表标签数据
    getNumberData:async function(data,data1,data2){
      const res = await getNumberData(data,data2,data1)
      if(res.data.Success == true){
         this.bottomData[2].num = res.data.Data.已排查
         this.bottomData[0].num = res.data.Data.待排查
         this.bottomData[1].num = res.data.Data.待审核
      }
    },
    getData:async function(data,data1,data2,data3) {
      const res = await seauthData(10,this.index,data,data1,data2);
      if(res.data.success == true&&res.data.data){
         this.loading = false
         this.contentData =this.contentData.concat(res.data.data.datas)
        //  this.bottomData.forEach((item,index)=>{
        //    if(this.nowIndex == index){
        //      item.num = this.contentData.length
        //    }
        //  })
        if (res.data.data.datas.length == 0) {
          //数据全部加载完成
          this.finished = true
        } else {
          this.finished = false
        }
        if(res.data.data.datas.length <10){
          this.finished = true
        } else{
          this.finished = false
        }
      } else{
        // this.contentData = []
        //  if(this.index == 1&&res.data.Data){

        // }
        this.finished = true
        // this.bottomData.forEach((item,index)=>{
        //    if(this.nowIndex == index){
        //      item.num = this.contentData.length
        //    }
        //  })
      }
    },
   onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.index += 1
      let  parmes;
       if(this.nowIndex == 0){
        parmes =0// '1,2'
      } else if(this.nowIndex == 1){
        parmes =1// 3
      } else{
        parmes = 2//'5,6'
      }
     if (this.nowIndex == 0){
       this.getData("",this.cityCode1,'')
     }else{
       this.getData(parmes,this.cityCode1,'')
     }
    },
    contentDataClick(item) {
        this.$router.push({
          path: "/keyInspectionAdd",
          query: {
            data: JSON.stringify(item),
            data1:this.nowIndex,
            citycode:this.cityCodeSCODE,
            cityCodeS:this.formData.QX,
            cityCode1:this.cityCode1,
          },
        });
    },
    //获取枚举数据
    getTownOpenDataView: async function (data) {
      this.TownColumns = [];
      let dataGuid = "b19e6f27-f574-4dea-9490-f7798ab7331a";
      let searchObject = [];
      let token = window.localStorage.getItem("token");
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "",
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.BUILDTYPEcolumnFWLX = [
         {
            DICNAME:'自建房',
              DICID:'0'
            },
            {
              DICNAME:'非自建房',
              DICID:'1'
            }

      ]
    },
    //获取枚举数据
    getTownOpenDataView1: async function (data) {
      this.TownColumns = [];
      let dataGuid = "1eaf7f1a-1981-4e5e-9b1a-f088ba8d2650";
      let searchObject = [];
      let token = window.localStorage.getItem("token");
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "",
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.BUILDTYPEcolumnZT = eval("(" + res.data.data + ")").Data;
      this.BUILDTYPEcolumnZT = [
          {
            DICNAME:'审核通过',
            DICID:'1'
          },
          {
            DICNAME:'审核未通过',
            DICID:'3'
          }
      ]
    },
    //获取枚举数据
    getTownOpenDataView2: async function (data) {
      this.TownColumns = [];
      let dataGuid = "bf1efae9-f634-4d15-9921-92dac825d1cb";
      let searchObject = [];
      let token = window.localStorage.getItem("token");
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "",
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.BUILDTYPEcolumnAQYH = [
        {
              DICNAME:'基本安全',
              DICID:'5'
            },
            {
              DICNAME:'存在风险',
              DICID:'6'
            }
      ]
    },
    getXianOpenDataView4: async function (data) {
      this.XianColumns = [];
      let dataGuid = "77fdf2b0-0eb5-4243-a0a4-6185299ccd34";
      let searchObject = JSON.stringify([
        { field: "pid", value: data, operator: "=" },
      ]);
      let token = window.localStorage.getItem("token");
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "",
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.BUILDTYPEcolumnQX = eval("(" + res.data.data + ")").Data;
      this.BUILDTYPEcolumnQX.forEach(item=>{
        if(item.CITYCODE ==this.cityCode1){

          this.formData.QX = item.CITYNAME
        }
      })
      this.onConfirmBUILDTYPEQX({
      CITYNAME: this.formData.QX,
      CITYCODE : this.cityCode1
    })

    },
    getTownOpenDataView5: async function (data) {
      this.TownColumns = [];
      let dataGuid = "24d07248-ba49-4b82-9029-b5eccaff179d";
      let searchObject = JSON.stringify([
        { field: "pid", value: data, operator: "=" },
      ]);
      let token = window.localStorage.getItem("token");
      let params = {
        accessCode: "688bd3883572440a859dfd8ba9194e7b",

        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "",
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token,
        },
      };
      const res = await QuerySignCallback(params);
      this.BUILDTYPEcolumnXZ = eval("(" + res.data.data + ")").Data;
    },
    //获取所有市
    getCityOpenDataView4: async function () {
      this.CityColumns = []
      let dataGuid = 'e9c98787-4966-4365-80b0-c1cc678c6f85'
      let searchObject = []
      let token = window.localStorage.getItem('token')
      let params = {
        accessCode: '688bd3883572440a859dfd8ba9194e7b',

        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
        params: {
          dataguid: dataGuid,
          searchObject: searchObject,
          token: token
        }
      }
      const res = await QuerySignCallback(params)
      this.CityColumns = eval('(' + res.data.data + ')').Data
    },
  },
  mounted() {
    this.contentData = []
    // this.formData.QX = this.$route.query.cityCodeS//区县名称
    this.cityCode1 = this.$route.query.cityCode//区县的citycode
    this.getNumberData(this.cityCode1,'','')
    this.cityCodeSCODE = this.$route.query.cityCodeSCODE //市
    this.getXianOpenDataView4(this.cityCodeSCODE);
    if(this.$route.query.data){
      this.nowIndex = this.$route.query.data
    }
    //没有citycode 需要单独去匹配
    this.getCity();
    this.getTownOpenDataView();
    this.getTownOpenDataView1();
    this.getTownOpenDataView2();
    // this.getNewCityCode(this.cityCode1)
        let  parmes;
       if(this.nowIndex == 0){
        parmes =0 //'1,2'
      } else if(this.nowIndex == 1){
        parmes =1// 3
      } else{
        parmes =2 //'5,6'
      }
    // this.getData(parmes,this.cityCode1,'');
    dd.ready(function () {
      dd.setTitle({
        title: "农房安全排查",
      })
        .then((res) => {
        })
        .catch((err) => {
          console.error(err);
        });
    });
  },
};
</script>
<style lang="scss" scoped >
#houseAppraisal {
  height: 100vh;
  overflow: auto;
  background: #ffffff;
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  /*font-size: 14px;*/
  .showSelectTop {
    display: flex;
    justify-content: space-between;
    .showSelect {
      // color: #d2d2d2;
    }
  }
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .content1 {
    // height: calc(100vh - 188px);
    overflow: auto;
    padding: 10px;
    // ul li div:first-of-type {
    //   float: left;
    //   width: 80%;
    // }
    .content {
      margin-top: 0.0778rem;
      padding: 0 0.2778rem;
      background-color: #ffffff;
      border-bottom: 1px solid #d9daeb;
      position: relative;
      overflow: hidden;
    }

    .listItem {
      position: relative;
      // 左滑动画效果
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      text-align: left;
    }

    // 左滑动画效果
    .listItem[data-type="0"] {
      transform: translate3d(0, 0, 0);
    }
    .listItem[data-type="1"] {
      transform: translate3d(-1.555rem, 0, 0);
    }
    .listItem:after {
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      z-index: 2;
    }

    .list {
      overflow: hidden;
      position: relative;
    }

    .delete {
      padding: 0 18px;
      height: 100%;
      // width: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ff4d4d;
      border-bottom: 3px solid #ff4d4d;
      color: #ffffff;
      font-size: 18px;
      position: absolute;
      top: 0;
      right: -1.9rem;
    }
    ul li {
      height: 95px;
      width: 124%;
      border-bottom: 1px solid #d2d2d2;
      margin-bottom: 10px;
      .btn {
        float: right;
        padding: 5% 0;
        width: 15%;
        background: #ff0000;
      }
    }
  }
  .bottom {
    height: 60px;
    padding-top: 10px;
    text-align: center;
    ul li {
      float: left;
      width: 33%;
    }
  }
    .van-popup {
    border-radius: 10px;
    .con_box {
      width: 270px;
      line-height: 1;
      text-align: center;
      color: #4d5c82;
      padding: 15px;
      box-sizing: border-box;
      > h3 {
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 20px;
      }
      > p {
        font-size: 17px;
        margin-bottom: 30px;
      }
      .btnv {
        display: flex;
        justify-content: space-between;
        > span {
          display: block;
          width: 114px;
          background-color: #e0e5f5;
          text-align: center;
          line-height: 44px;
          font-size: 17px;
        }
        > span:last-of-type {
          background-color: #1288fe;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
